<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- <p>{{str}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
        <p>{{html}}</p> -->

        <p id="demo"></p>

        <p  v-html="html">hello abc</p>
        <p  v-html="1+1">hello abc</p>
        <p  v-html="str.split('').reverse().join('')">hello abc</p>

        <hr>

        <p  v-text="html">hello abc</p>
        <p  v-text="'html'">hello abc</p>
        <p  v-text="1+1">hello abc</p>
        <p  v-text="str.split('').reverse().join('')">hello abc</p>

        <hr>

        <p>{{1+1}}</p>
        <p v-pre>{{1+1}}</p>
    </div>
</body>
<script>
    html
    'html'

   
    // Vue的模版语法
    // 文本插值  {{}}  =>   {{}}会被替换为数据对象(data)上对应属性名的值
    // 1. 不同类型的数据在 {{}}语法中,展示效果也不一样
    //      a. string number boolean 在 {{}}语法中会原样输出
    //      b. null undefined  {{}}语法中会输出为""
    //      c. 数组 对象 在{{}}语法会先转化为json字符串(JSON.stringify()),再输出

    // 2. 文本插值中的内容可以是JavaScript表达式  => a.先求解表达->得到结果 b.再将结果拼接
    // 3. 文本插值中可以调用函数
    // 4. 文本插值中可以做一些简单的判断  => 三目运算符



    // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 在{{}}文本插值中拼接html结构会原样输出, 如果将一个html结构输出到元素中
    // v-html  => 在元素中输出html结构(会覆盖元素原本的内容)
    // v-text  => 在元素中输出文本结构(会覆盖元素原本的内容)
    // v-pre   => 在元素内禁用文本插值语法



    var app = new Vue({  // 创建Vue实例
        el: "#app",   // 挂载的元素
        data: { // 数据层 => 对应属性名将属性值 拼接到模版语法中
            str: "hello Vue",
            num: 100,
            bool: true,
            html:"<b>123123</b>",
            obj:{a:1,b:3}
        },
        methods:{
            reverseStr(){
                return this.str.split("").reverse().join("");
            }
        }
    })

    setTimeout(()=>{
        app.html = "<i>321321</i>";
    },2000)









</script>

</html>